<template>
  <view class="select-container">
    <view class="header">
      <text class="title">选择年级与科目</text>
      <text class="subtitle">请先选择年级，然后选择需要辅导的科目</text>
    </view>
    
    <!-- 分为左右两栏布局，左侧为年级列表，右侧为科目列表 -->
    <view class="main-content">
      <!-- 左侧年级列表 -->
      <scroll-view class="grade-sidebar" scroll-y="true">
        <!-- 小学年级 -->
        <view class="grade-section">
          <view class="section-title">
            <view class="section-icon">小</view>
            <text>小学</text>
          </view>
          <view class="grade-list">
            <view 
              v-for="grade in primaryGrades" 
              :key="grade.id" 
              class="grade-item"
              :class="{ active: selectedGrade === grade.id }"
              @tap="selectGrade(grade.id, grade.name, 'primary')">
              <text>{{ grade.name }}</text>
            </view>
          </view>
        </view>
        
        <!-- 初中年级 -->
        <view class="grade-section">
          <view class="section-title">
            <view class="section-icon section-icon-middle">初</view>
            <text>初中</text>
          </view>
          <view class="grade-list">
            <view 
              v-for="grade in middleGrades" 
              :key="grade.id" 
              class="grade-item"
              :class="{ active: selectedGrade === grade.id }"
              @tap="selectGrade(grade.id, grade.name, 'middle')">
              <text>{{ grade.name }}</text>
            </view>
          </view>
        </view>
        
        <!-- 高中年级 -->
        <view class="grade-section">
          <view class="section-title">
            <view class="section-icon section-icon-high">高</view>
            <text>高中</text>
          </view>
          <view class="grade-list">
            <view 
              v-for="grade in highGrades" 
              :key="grade.id" 
              class="grade-item"
              :class="{ active: selectedGrade === grade.id }"
              @tap="selectGrade(grade.id, grade.name, 'high')">
              <text>{{ grade.name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      
      <!-- 右侧科目列表 -->
      <view class="subject-content">
        <view class="current-grade" v-if="selectedGrade">
          <text>{{ selectedGradeName }} 可选科目</text>
        </view>
        <view class="subject-placeholder" v-else>
          <text>请先选择左侧年级</text>
        </view>
        
        <scroll-view class="subject-scroll" scroll-y="true" v-if="selectedGrade">
          <view class="subject-grid">
            <view 
              v-for="subject in filteredSubjects" 
              :key="subject.id" 
              class="subject-item"
              :class="{ active: selectedSubjects.includes(subject.id) }"
              @tap="toggleSubject(subject.id)">
              <image class="subject-icon" :src="subject.icon" mode="aspectFit"></image>
              <text class="subject-name">{{ subject.name }}</text>
            </view>
          </view>
          
          <view v-if="filteredSubjects.length === 0" class="empty-state">
            <text>暂无可选科目</text>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 已选科目展示 -->
    <view v-if="selectedSubjects.length > 0" class="selected-section">
      <view class="section-title">已选择 {{ selectedSubjects.length }} 门科目</view>
      <scroll-view class="selected-scroll" scroll-x="true">
        <view class="selected-subjects">
          <view 
            v-for="subjectId in selectedSubjects" 
            :key="'selected-' + subjectId"
            class="selected-subject-tag">
            <text>{{ getSubjectNameById(subjectId) }}</text>
            <text class="remove-btn" @tap.stop="toggleSubject(subjectId)">×</text>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 底部按钮区 -->
    <view class="bottom-actions">
      <button class="back-btn" @tap="goBack">返回</button>
      <button 
        class="continue-btn" 
        :disabled="selectedSubjects.length === 0" 
        @tap="goToTeacherSelect">
        下一步
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedGrade: null,
      selectedGradeName: '',
      gradeType: '',
      selectedSubjects: [],
      
      // 年级数据
      primaryGrades: [
        { id: 1, name: '一年级' },
        { id: 2, name: '二年级' },
        { id: 3, name: '三年级' },
        { id: 4, name: '四年级' },
        { id: 5, name: '五年级' },
        { id: 6, name: '六年级' },
      ],
      middleGrades: [
        { id: 7, name: '七年级' },
        { id: 8, name: '八年级' },
        { id: 9, name: '九年级' },
      ],
      highGrades: [
        { id: 10, name: '高一' },
        { id: 11, name: '高二' },
        { id: 12, name: '高三' },
      ],
      
      // 科目数据
      allSubjects: [
        // 小学科目
        { id: 101, name: '语文', gradeType: 'primary', icon: '/static/kemu/xiaoyu.png' },
        { id: 102, name: '数学', gradeType: 'primary', icon: '/static/kemu/xiaoxue.png' },
        { id: 103, name: '英语', gradeType: 'primary', icon: '/static/kemu/xiaoying.png' },
        
        // 初中科目
        { id: 201, name: '语文', gradeType: 'middle', icon: '/static/kemu/xiaoyu.png' },
        { id: 202, name: '数学', gradeType: 'middle', icon: '/static/kemu/xiaoxue.png' },
        { id: 203, name: '英语', gradeType: 'middle', icon: '/static/kemu/xiaoying.png' },
        { id: 204, name: '物理', gradeType: 'middle', icon: '/static/kemu/wuli.png' },
        { id: 205, name: '化学', gradeType: 'middle', icon: '/static/kemu/huaxue.png' },
        { id: 206, name: '生物', gradeType: 'middle', icon: '/static/kemu/image.png' },
        { id: 207, name: '历史', gradeType: 'middle', icon: '/static/kemu/image.png' },
        { id: 208, name: '地理', gradeType: 'middle', icon: '/static/kemu/image.png' },
        { id: 209, name: '政治', gradeType: 'middle', icon: '/static/kemu/image.png' },
        
        // 高中科目
        { id: 301, name: '语文', gradeType: 'high', icon: '/static/kemu/xiaoyu.png' },
        { id: 302, name: '数学', gradeType: 'high', icon: '/static/kemu/xiaoxue.png' },
        { id: 303, name: '英语', gradeType: 'high', icon: '/static/kemu/xiaoying.png' },
        { id: 304, name: '物理', gradeType: 'high', icon: '/static/kemu/wuli.png' },
        { id: 305, name: '化学', gradeType: 'high', icon: '/static/kemu/huaxue.png' },
        { id: 306, name: '生物', gradeType: 'high', icon: '/static/kemu/image.png' },
        { id: 307, name: '历史', gradeType: 'high', icon: '/static/kemu/image.png' },
        { id: 308, name: '地理', gradeType: 'high', icon: '/static/kemu/image.png' },
        { id: 309, name: '政治', gradeType: 'high', icon: '/static/kemu/image.png' }
      ]
    }
  },
  computed: {
    // 根据年级类型筛选科目
    filteredSubjects() {
      return this.allSubjects.filter(subject => subject.gradeType === this.gradeType)
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '选择年级和科目'
    })
  },
  methods: {
    // 选择年级
    selectGrade(gradeId, gradeName, gradeType) {
      this.selectedGrade = gradeId
      this.selectedGradeName = gradeName
      this.gradeType = gradeType
      
      // 切换年级时清空已选科目
      this.selectedSubjects = []
    },
    
    // 切换科目选择状态
    toggleSubject(subjectId) {
      const index = this.selectedSubjects.indexOf(subjectId)
      if (index > -1) {
        // 已选中，则取消选择
        this.selectedSubjects.splice(index, 1)
      } else {
        // 未选中，则添加到选中列表
        this.selectedSubjects.push(subjectId)
      }
    },
    
    // 通过ID获取科目名称
    getSubjectNameById(subjectId) {
      const subject = this.allSubjects.find(item => item.id === subjectId)
      return subject ? subject.name : '未知科目'
    },
    
    // 返回上一级
    goBack() {
      uni.navigateBack()
    },
    
    // 前往教师选择页面
    goToTeacherSelect() {
      if (!this.selectedGrade) {
        uni.showToast({
          title: '请选择年级',
          icon: 'none'
        })
        return
      }
      
      if (this.selectedSubjects.length === 0) {
        uni.showToast({
          title: '请至少选择一个科目',
          icon: 'none'
        })
        return
      }
      
      // 将选中的科目ID转为字符串
      const selectedSubjectIds = this.selectedSubjects.join(',')
      
      // 获取选中科目名称数组
      const selectedSubjectNames = this.selectedSubjects.map(id => this.getSubjectNameById(id)).join(',')
      
      uni.navigateTo({
        url: `/pages/signup/teacher-select?gradeId=${this.selectedGrade}&gradeName=${this.selectedGradeName}&gradeType=${this.gradeType}&subjectIds=${selectedSubjectIds}&subjectNames=${selectedSubjectNames}`
      })
    }
  }
}
</script>

<style>
.select-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.header {
  padding: 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.subtitle {
  font-size: 26rpx;
  color: #666;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* 左侧年级列表样式 */
.grade-sidebar {
  width: 240rpx;
  background-color: #fff;
  height: 100%;
  border-right: 1rpx solid #f0f0f0;
}

.grade-section {
  padding: 20rpx 0;
}

.section-title {
  display: flex;
  align-items: center;
  padding: 0 20rpx 10rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.section-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #FF9500;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin-right: 10rpx;
  font-weight: bold;
}

.section-icon-middle {
  background-color: #34C759;
}

.section-icon-high {
  background-color: #007AFF;
}

.grade-list {
  padding: 0 10rpx;
}

.grade-item {
  padding: 20rpx 15rpx;
  margin: 5rpx 0;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #333;
  text-align: center;
  transition: all 0.2s;
}

.grade-item.active {
  background-color: #e6f7ff;
  color: #1890ff;
  font-weight: bold;
}

/* 右侧科目列表样式 */
.subject-content {
  flex: 1;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 20rpx;
}

.current-grade {
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  border-bottom: 1px solid #f0f0f0;
}

.subject-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  color: #999;
}

.subject-scroll {
  flex: 1;
  padding: 20rpx 0;
}

.subject-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.subject-item {
  width: calc(33.33% - 14rpx);
  height: 160rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #e0e0e0;
  transition: all 0.2s;
}

.subject-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.subject-name {
  font-size: 26rpx;
  color: #333;
}

.subject-item.active {
  background-color: #e6f7ff;
  border-color: #1890ff;
}

.subject-item.active .subject-name {
  color: #1890ff;
  font-weight: bold;
}

.empty-state {
  padding: 60rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}

/* 已选科目展示区样式 */
.selected-section {
  background-color: #fff;
  padding: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.selected-scroll {
  width: 100%;
  white-space: nowrap;
}

.selected-subjects {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 5rpx;
}

.selected-subject-tag {
  display: inline-flex;
  align-items: center;
  background-color: #e6f7ff;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  margin-right: 15rpx;
  font-size: 26rpx;
  color: #1890ff;
}

.remove-btn {
  margin-left: 10rpx;
  font-size: 28rpx;
  width: 28rpx;
  height: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 底部按钮区样式 */
.bottom-actions {
  display: flex;
  gap: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn, .continue-btn {
  flex: 1;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  font-size: 32rpx;
  text-align: center;
}

.back-btn {
  background-color: #f0f0f0;
  color: #666;
}

.continue-btn {
  background-color: #1890ff;
  color: white;
}

.continue-btn:disabled {
  background-color: #ccc;
  color: #fff;
}
</style> 